<template>
    <el-popover
        trigger="click"
        placement="bottom-start"
        :width="420"
        v-model:visible="popoverVisible"
        @before-enter="handlePopoverShow"
    >
    <template #reference>
      <div class="result">
        <div>{{ result }}</div>
        <div>
            <el-icon-arrowdown :class="{up: popoverVisible}"></el-icon-arrowdown>
        </div>
      </div>
    </template>
    <div class="container">
        <el-row :guttar="10">
            <el-col :span="10">
                <el-radio-group v-model="radioValue">
                    <el-radio-button label="按城市" />
                    <el-radio-button label="按省份" />
                </el-radio-group>
            </el-col>
            <el-col :span="14">
                <el-select 
                v-model="selectValue" 
                filterable 
                :filter-method="filterMethod"
                @change = "changeSelect"
                placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    />
                </el-select>
            </el-col>
        </el-row>
        <template v-if="radioValue == '按城市'">
            <div class="city-letter">
                <div 
                class="city-letter-item" 
                @click="handleChooseLetter(item)" 
                v-for="(item, index) in Object.keys(cities)" 
                :key="index">
                    {{ item }}
                </div>
            </div>
            <el-scrollbar max-height="300px">
                <div class="city">
                    <el-row v-for="(value, key) in cities" :key="key"  :id="key">
                        <el-col :span="2">
                            {{ key + '：' }}
                        </el-col>
                        <el-col :span="22" class="city-name">
                            <div 
                            class="city-name-item" 
                            @click="handleChooseCity(item)"
                            v-for="item in value" :key="item.id">
                                {{ item.name }}
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-scrollbar>
        </template>
        <template v-else>
            <div class="province-letter">
                <div 
                class="province-letter-item" 
                @click="handleChooseLetter(item)" 
                v-for="(item, index) in Object.keys(provinces)" 
                :key="index">
                    {{ item }}
                </div>
            </div>
            <el-scrollbar max-height="300px">
                <div class="province">
                    <template 
                    v-for="(item, index) in Object.values(provinces)"
                    >
                        <el-row v-for="(item1, index1) in item" :key="index1"  :id="item1.id">
                            <el-col :span="4">
                                {{ item1.name + '：' }}
                            </el-col>
                            <el-col :span="20" class="province-name">
                                <div 
                                class="province-name-item" 
                                v-for="(item2, index2) in item1.data" :key="index2"
                                @click="handleChooseProvince(item2)"
                                >
                                    {{ item2 }}
                                </div>
                            </el-col>
                        </el-row>
                    </template>
                </div>
            </el-scrollbar>
        </template>
    </div>
  </el-popover>
</template>

<script setup lang="ts">
import cityData from './lib/city'
import provinceData from './lib/province.json'
import { City } from './types';

  let result = ref<string>('请选择')
  let radioValue = ref<string>('按城市')
  let selectValue = ref<string>('')
  let popoverVisible = ref<boolean>(false)
  let cities = ref(cityData.cities)
  let provinces = ref(provinceData)

  let options = ref<City[]>([])
  let allCities = ref<City[]>([])


  const filterMethod = (val: string) => {
    if (val == '') {
        options.value = allCities.value
    } else {
        if (radioValue.value == '按城市') {
            // 中文和拼音一起
            options.value = allCities.value.filter(item => {
                return item.name.includes(val) || item.spell.includes(val)
            })
        } else {
            options.value = allCities.value.filter(item => {
                return item.name.includes(val)
            })
        }
    }
    
  }  

  const changeSelect = (val: Number) => {
    let item = allCities.value.find(item => {
        return item.id == val
    })!
    // console.log(item);
    result.value = item.name
    if (radioValue.value == '按城市') {
        emits('changeCity', item)
    } else {
        emits('changeProvince', item.name)
    } 
  }

  onMounted(() => {
    allCities.value = Object.values(cities.value).flat(2)
    // console.log(allCities.value); 
    options.value = allCities.value
    
  })

let emits = defineEmits(['changeCity', 'changeProvince'])

const handleChooseCity = (item: City) => {
    // console.log(item);
    result.value = item.name
    popoverVisible.value = false
    emits('changeCity', item)
}

const handleChooseProvince = (item: string) => {
    // console.log(item);
    result.value = item
    popoverVisible.value = false
    emits('changeProvince', item)
}

const handleChooseLetter = (item: string) => {
    // console.log(item);
    let ele = document.getElementById(item)
    if (ele) {
        ele?.scrollIntoView()
    }
}

const handlePopoverShow = () => {
    radioValue.value = '按城市'
}
</script>

<style scoped lang="scss">
.result{
    display: flex;
    align-items: center;
    width: fit-content;
    .up{
      transform: rotate(180deg);
    }
}
svg{
    width: 1rem;
    height: 1rem;
    position: relative;
    margin-left: 4px;
    top: 2px;
    transition: all 0.25s linear;
}
.city-letter, .province-letter{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 10px 0;
    .city-letter-item, .province-letter-item{
        margin: 4px;
        border: 1px solid #eee;
        padding: 3px 6px;
        border-radius: 4px;
        cursor: pointer;
    }
}
.city-name, .province-name {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 10px;
    .city-name-item, .province-name-item{
       margin: 0 6px 6px 0;
       cursor: pointer;
    }
}
</style>
